import { _decorator, Component, Node, Button } from 'cc';
import { EditBox } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { BindEditBox } from '../../../../scripts/libs/rxjs/cc3/BindEditBox';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
const { ccclass, property } = _decorator;

@ccclass('EditorCreatePanel')
export class EditorCreatePanel extends BasePanel {

    @property(EditBox)
    stageIdEditBox: EditBox = null;

    @property(EditBox)
    widthEditBox: EditBox = null;

    @property(EditBox)
    heightEditBox: EditBox = null;

    @property(Button)
    cancelButton: Button = null;

    @property(Button)
    acceptButton: Button = null;

    stageId = ReactiveProperty.Create(0);
    width = ReactiveProperty.Create(6);
    height = ReactiveProperty.Create(6);

    useObserves() {
        return [
            BindEditBox(this.stageIdEditBox).subscribe(_ => this.stageId.value = Number(this.stageIdEditBox.string)),
            BindEditBox(this.widthEditBox).subscribe(_ => this.width.value = Number(this.widthEditBox.string)),
            BindEditBox(this.heightEditBox).subscribe(_ => this.height.value = Number(this.heightEditBox.string)),
            BindButton(this.cancelButton).subscribe(this.cancelButtonClicked.bind(this)),
            BindButton(this.acceptButton).subscribe(this.acceptButtonClicked.bind(this)),
        ];
    }

    cancelButtonClicked() {
        EditorCreatePanel.CloseProcess(null, { status: 'cancel' });
    }

    acceptButtonClicked() {
        EditorCreatePanel.CloseProcess(null, {
            status: 'confirm',
            stageId: this.stageId.value,
            width: this.width.value,
            height: this.height.value
        });
    }

}


